<template>
    <div id="menubar">
        <div class="header">
            <h2>{{ title || 'SETTING | AMO' }}</h2>
            <div class="btn-group btn-group-justified" role="group">
                <!-- all -->
                <div class="btn-group" role="group">
                    <button type="button"
                            :class="{active: filter === 'all'}"
                            @click="setFilter('all')"
                            class="btn btn-default active">全部</button>
                </div>

                <!-- favorites -->
                <div class="btn-group" role="group">
                    <button type="button"
                            :class="{active: filter !== 'all'}"
                            @click="setFilter('star')"
                            class="btn btn-default">收藏</button>
                </div>
            </div>

            <div class="btn-group btn-group-justified" role="group">
                <div class="input-group search">
                    <input type="search"
                           @input="onSearch | debounce 500"
                           v-model="searchValue"
                           debounce="500"
                           class="form-control"
                           placeholder="搜索...">
                    <span class="input-group-addon">
                        <i class="glyphicon glyphicon-search"> </i>
                    </span>
                </div>
            </div>
        </div>
        <div class="list-group">
            <a v-for="menu in filterMenus"
               v-link="{path: menu.path}"
               transition="staggered"
               stagger="100"
               class="list-group-item">{{ menu.title }}</a>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    Vue.transition('stagger', {
        stagger: function (index) {
            // 每个过渡项目增加 50ms 延时
            // 但是最大延时限制为 300ms
            return Math.min(300, index * 50)
        }
    });
    export default{
        props: {
            title: String,
            menus: Array
        },
        data(){
            return {
                searchValue: '',
                filterMenus: this.menus,
                filter: 'all'
            }
        },
        components: {},
        methods: {
            setFilter: function (show) {
                this.filter = show;
            },

            onSearch: function () {
                this.filterMenus = this.menus.filter(menu => menu.title.indexOf(this.searchValue) != -1);
            }
        }
    }
</script>

<style lang="scss" scoped>
    #menubar {
        width: 300px;
        background-color: #ddd;
        margin: 10px 0 10px 0;
        border-radius: 10px;

        .header {
            padding: 5px 25px 25px 25px;

            h2 {
                font-weight: 300;
                text-transform: uppercase;
                text-align: center;
                font-size: 22px;
                padding-bottom: 8px;
            }

            .btn-group {
                .btn-default {
                    color: #30414d;
                    border-color: #ccc;
                    background-color: #ccc;
                    outline: 0;
                    border-radius: 0;
                }
                .active {
                    border-color: #3da077;
                    background-color: #3da077;
                    box-shadow: none;
                    color: #dddddd;
                }
            }

            .search {
                margin-top: 20px;

                .form-control {
                    border-radius: 0;
                    outline: 0;
                    color: #3da077;
                    background-color: #ffffff;
                    border-color: #3da077;
                }
                .input-group-addon {
                    border-radius: 0;
                    outline: 0;
                    background-color: #3da077;
                    border-color: #3da077;
                    color: #dddddd;
                }
            }
        }

        .list-group-item {
            border-radius: 0 !important;
            margin-bottom: -1px;

            &.v-link-active {
                text-shadow: 0 -1px 0 #20884b;
                background-color: #20884b;
                border-color: #20884b;
                color: #fff;
            }
        }
    }

    .staggered-transition {
        transition: all .3s ease;
        overflow: hidden;
        margin: 0;
    }

    .staggered-enter,
    .staggered-leave {
        opacity: 0;
        height: 0;
    }
</style>